<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <!-- 浏览器解析到这行代码,会执行根据src的url地址发送请求. script标签只能发送get请求 -->

    <!-- script发送请求的作用: 请求回来之后,会把请求回来的内容放到script标签的子节点进行执行 
    
    以前:  <script src="xxx.js"></script> 给服务器发送请求,服务响应的是xxx.js文件中的代码.然后浏览器将这些代码,添加到这个script的子节点,并且运行这些代码(注意: 会覆盖原来script标签子节点的内容)

    现在:  <script src="http://localhost:5000/test"></script> 给服务器发送请求,服务响应的是这个url地址响应的内容.然后浏览器将这个内容,添加到这个script的子节点,并且运行这个内容(注意: 会覆盖原来script标签子节点的内容)

   -->
    <!-- <script src="http://localhost:5000/test">
      // var aaa = 1
    </script>
    <script>
      console.log(aaa)
    </script> -->
    <script>
      function xxx(arr) {
        console.log('script请求响应完成了', arr)
      }
      btn.onclick = function () {
        // 直接在网页中写好script标签,只要网页打开,请求就发送了,不能控制发送请求的时机
        // 所以当我们需要利用jsonp发送请求的时候,一般会动态创建script标签
        // 1. 动态创建script(此时他不在dom树上,也没有src)
        const script = document.createElement('script')
        // 2. 给script标签添加src属性,设置请求的url地址
        script.src = 'http://localhost:5000/test?callback=xxx'
        // 3. 将script标签添加到dom树上,浏览器才会解析,才会发送请求
        document.body.appendChild(script)
      }
    </script>
  </body>
</html>
